<template>
  <my-drawer ref="MyDrawerRef" title="角色操作" @submit="submit" :disabled="false" width="30%">
    <el-form :model="drawProps.rowData" label-width="130" :rules="rules" ref="FormRef">
      <el-form-item label="角色昵称" prop="roleName">
        <el-input v-model="drawProps.rowData.roleName"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number :min="1" :max="200" v-model="drawProps.rowData.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="登录页">
        <el-input v-model="drawProps.rowData.login_page"></el-input>
      </el-form-item>
    </el-form>
  </my-drawer>
</template>

<script setup lang="ts">
import MyDrawer from "@/components/MyDrawer/index.vue";
import { reactive, ref } from "vue";
import { Role } from "@/api/interface/role";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { CheckName } from "@/utils/eleValidate";

const MyDrawerRef = ref<InstanceType<typeof MyDrawer> | null>(null);

interface DrawerProps {
  api?: (params: any) => Promise<any>;
  rowData: Role.Option;
  isDisableSetRegion: boolean;
  getTable?: () => Promise<any>;
}

// --------初始化数据啊---------
const initData: Role.Option = {
  pid: 1,
  roleName: "",
  roleValue: "",
  remark: "",
  sort: 100,
  login_page: ""
};

const drawProps = ref<DrawerProps>({
  rowData: JSON.parse(JSON.stringify(initData)),
  isDisableSetRegion: false
});

const acceptParams = (params: DrawerProps) => {
  drawProps.value = params;
  if (!params.rowData) {
    drawProps.value.rowData = JSON.parse(JSON.stringify(initData));
  }
  MyDrawerRef.value?.acceptParams();
};

// ----------表单
const rules = reactive<FormRules>({
  roleName: [
    { required: true, message: "角色昵称必须" },
    { min: 1, max: 20, message: "字符在1-20之间" }
  ],
  roleValue: [
    { required: true, message: "角色值必须" },
    { required: true, max: 20, message: "字符在1-20之间" },
    { validator: CheckName }
  ],
  remark: [{ min: 0, max: 300, message: "字符在0-300之间" }]
});

// -----------提交表单
const FormRef = ref<FormInstance>();
const submit = () => {
  FormRef.value?.validate(async valid => {
    if (valid) {
      try {
        await drawProps.value.api!(drawProps.value.rowData);
        ElMessage.success("成功");
        await drawProps.value.getTable!();
        MyDrawerRef.value?.close();
      } catch (error) {}
    }
  });
};
defineExpose({
  acceptParams
});
</script>

<style></style>
